import React, { useState } from 'react'
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Link from 'next/link';
import Logo from '../logo'
import Typography from '@material-ui/core/Typography';
import LinkMyPage from '../profile/LinkMyPage'
import Divider from '@material-ui/core/Divider';

const useStyles = makeStyles({
  list: {
    width: 250,
  },
  fullList: {
    width: 'auto',
  },
  center: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  }
});

export default function (): [React.ReactNode, boolean, React.Dispatch<React.SetStateAction<boolean>>] {
  const classes = useStyles();

  const [open, setOpen] = useState(false)

  const toggleDrawer = open => event => {
    if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return;
    }
    setOpen(open);
  };


  const list = () => (
    <div
      className={classes.list}
      role="presentation"
      onClick={toggleDrawer(false)}
      onKeyDown={toggleDrawer(false)}
    >
      <Typography className={classes.center} variant="h6" noWrap>
        <Logo title='Boboan' />
      </Typography>
      <List>
        <ListItem button key={'博客'}>
          <Link href={'/'}>
            <ListItemText primary={'博客'} />
          </Link>
        </ListItem>
        <Divider />
        <ListItem button key={'标签'}>
          <Link href={'/tags'}>
            <ListItemText primary={'标签'} />
          </Link>
        </ListItem>
        <Divider />
        <ListItem button key={'归档'}>
          <Link href={'/archive'}>
            <ListItemText primary={'归档'} />
          </Link>
        </ListItem>
        <Divider />
        <ListItem button key={'关于'}>
          <Link href={'/about'}>
            <ListItemText primary={'关于'} />
          </Link>
        </ListItem>
      </List>
      <LinkMyPage />
    </div>
  );

  return [<SwipeableDrawer
    anchor='left'
    open={open}
    onClose={toggleDrawer(false)}
    onOpen={toggleDrawer(true)}
  >
    {list()}
  </SwipeableDrawer>, open, setOpen]
}
